<template>
    <div>
        <layout-box one="数据统计" two="数据报表">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div ref="dv" id="main" style="width: 600px;height:400px;"></div>
        </layout-box>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    //初始化echarts实例
    var mychart = echarts.init(this.$refs.dv);
    var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '销售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技术（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研发（Development）', max: 52000},
           { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
};
    mychart.setOption(option);
  }
};
</script>

<style lang="less" scoped>
</style>